import React, {Component} from 'react';
import {require} from "../../netWork";
import styles from './index.module.css'
import CarouselComponent from "./components/Carousel/CarouselComponent";
import {Toast} from "antd-mobile";
import {baseUrl} from "../../utiles/baseUrl";
import HeadPicker from "./components/HeadPacker/HeadPicker";
import BottomBar from "./components/BottomBar/BottomBar";

class HouseDetail extends Component {
    state = {
        houseDetail: {},
    };

      componentDidMount() {
        this.getData();

    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
            this.createMap();
             return this.state
    }
    componentDidUpdate(prevProps, prevState, snapshot) {

    }

    //从路由获取城市id,并获取房屋详细信息
     getData = async ()  =>{
        Toast.loading('加载中...', 2, null,true);
        const {match: {params}} = this.props;
        await    require({
            url: `/houses/${params.id}`
        }).then(res => {
            // console.log(res);
            this.setState({houseDetail: res.body})
        });

    };

    //展示轮播图
    showCarousel = () => {
        const {houseDetail: {houseImg, community}} = this.state;
        if (houseImg !== undefined) {
            // console.log(houseImg);
            return <CarouselComponent img={houseImg} community={community}/>
        }
    };

    //创建地区
    createMap = () =>{
        const {houseDetail:{coord,community}} = this.state;
        // console.log(coord);
        var map = new window.BMapGL.Map("container");
// 创建地图实例
        var point = new window.BMapGL.Point(coord.longitude,coord.latitude);
// 创建点坐标
        map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
        var content = community;
        var label = new window.BMapGL.Label(content, {       // 创建文本标注
            position: point,                          // 设置标注的地理位置
            offset: new window.BMapGL.Size(10, 5)           // 设置标注的偏移量
        })
        map.addOverlay(label);
        label.setStyle({                              // 设置label的样式
            color: '#fff',
            fontSize: '10px',
            background: 'red'
        })
    };
    render() {
        const {houseDetail: {title, tags,price,size,roomType,oriented,floor,community,description,supporting}} = this.state;
        return (
            <div className={styles.root}>
                <div className={styles.rootitem}>
                    {/*轮播图*/}
                    {this.showCarousel()}
                    {/*标题   */}
                    <div className={styles.title}>
                        <div >{title}</div>
                        <div className={styles.tags}>
                            {tags}
                        </div>
                    </div>
                    {/*type*/}
                    <div className={styles.type}>
                        <div>
                            <div>{price}/月</div>
                            <div className={styles.rent}>租金</div>
                        </div>
                        <div>
                            <div>{roomType}</div>
                            <div className={styles.rent}>房型</div>
                        </div>
                        <div>
                            <div>{size}平米</div>
                            <div className={styles.rent}>面积</div>
                        </div>
                    </div>
                    {/*亮点*/}
                    <div className={styles.info}>
                        <div className={styles.infoitem}>
                            <span className={styles.zx}>装修：</span>精修
                        </div>
                        <div className={styles.infoitem}>
                            <span className={styles.zx}>朝向：</span>{oriented}
                        </div>
                        <div className={styles.infoitem}>
                            <span className={styles.zx}>楼层：</span>{floor}
                        </div>
                        <div className={styles.infoitem}>
                            <span className={styles.zx}>类型：</span>普通住宅
                        </div>
                    </div>
                    <div className={styles.map}>
                        <div className={styles.mapitem}>小区：{community}</div>
                        <div id="container" className={styles.container}/>
                    </div>
                    {/*房屋配套*/}
                    <div className={styles.roomfacility}>
                        <div className={styles.mapitem}>房屋配套</div>
                        {supporting > 0 ?  <HeadPicker list={supporting}/> : <div className={styles.nodata}>暂无更多信息</div> }

                    </div>
                    {/*房屋概况*/}
                    <div className={styles.roominfo}>
                        <div className={styles.mapitem}>房屋概况</div>
                        <div className={styles.head}>
                            <div>
                                <img className={styles.img} src={baseUrl + '/img/avatar.png'} alt="头像"/>
                                <div className={styles.name}>
                                    <div className={styles.sex}>王女士</div>
                                    <div className={styles.rz}>已认证房主</div>
                                </div>
                            </div>
                            <div className={styles.send}>发送消息</div>
                        </div>
                        <div>
                            {description ? description : <div className={styles.nodata}>暂无更多信息</div>}
                        </div>
                    </div>
                </div>
                <BottomBar  value={this.props.match.params.id} route={this.props}/>
            </div>
        );
    }
}

export default HouseDetail;
